<template>
  <div class="head-bar">
    <div class="right-bar">
      <IndicatorSelect :calcIndicator="calcIndicator" v-model="indicator" :indicators="indicators"
                       :selectDisabled="selectDisabled" />
      <el-button type="primary" @click="() =>{drawerVisible = !drawerVisible}" style="margin-left: 10px"
                 :disabled="selectDisabled">HistoryData
      </el-button>
    </div>
  </div>

  <el-carousel ref="carousel" :interval="0" type="card" style="height: 650px">
    <el-carousel-item v-for="(value,key,index) in allTaskData[currentIndex]" :key="index"
                      style="height: 640px;width: 570px" :name="key">
      <el-card class="box-card" style="width: 99%;height: 70%">
        <CommonEcharts :my_height="height" :options="value" :my_width="width" />
      </el-card>
    </el-carousel-item>
  </el-carousel>
  <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;flex-wrap: wrap">
    <el-progress type="circle" :percentage="isNaN(progress)?0:progress" />
    evaluations:{{ evaluations }}
  </div>

  <el-drawer
    v-model="drawerVisible"
    title="history"
    size="15%"
    direction="rtl"
  >
    <ul class="my-ul">
      <li v-for="(item,index) in historyFormData" :key="index"
          @click="selectHistoryData(index)">{{ item.algorithm.name }} on {{ item.problem.name }}
      </li>
    </ul>
    <el-text class="mx-1" type="primary">
      <pre class="my-pre">{{ JSON.stringify(historyFormData[currentIndex], null, 2) }}</pre>
    </el-text>
  </el-drawer>

</template>
<script setup>
import { storeToRefs } from 'pinia'
import CommonEcharts from '@/components/echarts/CommonEcharts.vue'
import { useSimpleTaskData } from '@/stores/simpleTaskData.js'
import selectChange from '@/composables/SimpleCharts/changeSelect.js'
import { useSimpleUIStore } from '@/stores/simpleTaskUI.js'

const height = ref('550px')
const width = ref('440px')

const simpleTaskData = useSimpleTaskData()
const { allTaskData, indicator, currentIndex, indicators, evaluations, progress } = storeToRefs(simpleTaskData)
const { historyFormData, selectHistoryData } = simpleTaskData

const { calcIndicator, carousel } = selectChange()

const simpleUIStore = useSimpleUIStore()
const { selectDisabled, drawerVisible } = storeToRefs(simpleUIStore)

</script>
<style lang="scss">
.head-bar {
  width: 100%;
  height: 45px;
  padding: 0 5px;
  background-color: skyblue;
  margin-bottom: 10px;
  display: flex;
  justify-content: right;
  align-items: center;
  border-radius: 5px;
}

.el-carousel__container {
  height: 100%;
}

.my-ul {
  height: 350px;
  overflow: auto;
  display: flex;
  border: 1px solid;
  flex-direction: column;
  justify-content: start;
  padding: 0;
  border-radius: 5px;

  li {
    text-align: center;
    height: 50px;
    margin: 10px;
    padding: 10px;
    border: 1px solid;
    border-radius: 5px;

    &:hover {
      cursor: pointer;
    }

    &:active {
      background-color: skyblue;
    }
  }
}

.my-pre {
  border: 1px solid;
  border-radius: 5px;
  margin-top: 5px;
  overflow: auto;
  height: 400px;
}
</style>
